<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1516407_rud7f3pybu9.css">
    <link rel="stylesheet" href="../css/shouye.css">
    <link rel="stylesheet" href="../css/swiper.css">
    <link rel="stylesheet" href="../css/bootstrap.css">

    <style>
        .box {
            margin-bottom: 20px;
        }

        .swiper-container {
            width: 100%;
            height: 300px;
        }

        .swiper-pagination {
            right: 50%;
            top: 95%;
        }

        .swiper-pagination span {
            width: 14px;
            height: 14px;
            float: left;
            text-align: center;
            margin-right: 15px;
        }

        .swiper-container-vertical>.swiper-pagination-bullets {
            widows: 10%;
            right: 46%;
            top: 95%;
        }

        .swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet {
            margin: 5px 5px;
            display: block;
        }

        .Carousel .swiper-wrapper img {
            width: 100%;
            height: 300px;
        }

        .box .tuijian {
            display: flex;
            margin: 2% 0%;
            width: 100%;
        }

        .box .tuijian>div {
            width: 24%;
            flex-direction: column;
            margin-left: 1.33333%;
        }

        .box .tuijian>div img {
            width: 100%;
        }

        .box .tuijian .jingpin:nth-child(1) {
            margin-left: 0px;
        }

        .libaiwu .libaiwu_biaoti .left i {
            line-height: 30px;
            color: #498e3d;
            font-size: 28px;
        }

        .libaiwu .libaiwu_biaoti {
            display: flex;
            line-height: 30px;
            width: 100%;
            justify-content: space-between;
            background-color: #ebffe8;
            padding: 6px;
        }


        .libaiwu .libaiwu_biaoti .left strong {
            color: #498e3d;
            font-size: 20px;
        }

        .libaiwu .swiper-slide div {
            float: left;
            width: 23%;
            margin-right: 2.666%;
            border: 1px solid #ececec;
        }

        .libaiwu .swiper-slide div:nth-child(4) {
            margin-right: 0%;
        }

        .haixian {
            width: 100%;
        }

        .haixian .haixian-biaoti {
            display: flex;
            border-bottom: 1px solid #6ea865;
            line-height: 50px;
            width: 100%;
            justify-content: space-between;
            padding: 6px;
            background: #ebffe8;
        }

        .haixian .haixian-biaoti .left i {
            line-height: 30px;
            color: #498e3d;
            font-size: 28px;
        }


        .haixian .haixian-biaoti .left strong {
            color: #498e3d;
            font-size: 20px;
        }

        .haixian .haixian-biaoti .swiper-slide {
            width: 100%;
        }

        .haixian .haixian-biaoti .swiper-slide div img {
            width: 100%;
        }

        .haixian .haixian-neirong {
            display: flex;
            width: 100%;
            margin-top: 2%;
            margin-bottom: 2%;
        }

        .haixian .haixian-neirong>div {
            flex-direction: column;
            border: 1px solid #ececec;
            padding: 1%;
            width: 23%;
            margin-right: 2.666%;
        }

        .haixian .haixian-neirong>div img {
            width: 100%;
        }


        .haixian .haixian-neirong>div:nth-child(4) {
            margin-right: 0%;
        }

        .libaiwu .swiper-slide>div img {
            width: 100%;
        }

        .libaiwu .swiper-container {
            margin-top: 2%;
            margin-bottom: 2%;
        }
        .zhonglei .jiage strong{
            font-size: 20px;
            color: #ff5757;
        }
        .zhonglei .jiage span{
            margin-right: 5px;text-decoration: line-through;
        }
        .zhonglei .jiage i{
           float:right;
           font-size: 25px;
           color: #f08200;
        }
    </style>
</head>

<body>


    <div class="box">


        <div class="Carousel">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img src="../img/lym/lunbotu.png" alt=""></div>
                    <div class="swiper-slide"><img src="../img/lym/lunbotu.png" alt=""></div>
                    <div class="swiper-slide"><img src="../img/lym/lunbotu.png" alt=""></div>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>

                <!-- 如果需要导航按钮 -->
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
            </div>
        </div>
        <div class="tuijian">
        </div>
        <div class="libaiwu">
            <div class="libaiwu_biaoti">
                <div class="left">
                    <i
                        class="icon iconfont icon-miaobiao"></i><strong>&nbsp;&nbsp;礼拜五&nbsp;&nbsp;</strong><span>Firiday</span>
                </div>
                <div class="right">
                    <span>更多&nbsp;></span>

                </div>

            </div>
            <!-- 轮播图 -->
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                    </div>
                    <div class="swiper-slide">
                    </div>
                    <div class="swiper-slide">
                    </div>
                    <div class="swiper-slide">
                    </div>
                </div>

                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>

            </div>

        </div>
    </div>



</body>
<script src="../js/swiper.js"></script>
<script src="../js/jquery-3.4.1.js"></script>
<script>
    var mySwiper = new Swiper('.libaiwu  .swiper-container', {
        direction: 'vertical',
        loop: true,

        // 如果需要分页器
        pagination: '.swiper-pagination',



    })
    // 第一个轮播
    var mySwiper = new Swiper('.Carousel .swiper-container', {
        slidesPerView: 3,
        slidesPerGroup: 3,
    })
    var mySwiper = new Swiper('.Carousel  .swiper-container', {



        // 如果需要分页器
        pagination: '.swiper-pagination',

        // 如果需要前进后退按钮
        nextButton: '.Carousel .swiper-button-next',
        prevButton: '.Carousel .swiper-button-prev',
        effect: 'cube',
        flip: {
            slideShadows: true,
            limitRotation: true,
        }

    })

</script>
<script>
    for (i = 0; i < 4; i++) {
        var jingpin = $('<div>').appendTo($('.tuijian')).addClass('jingpin');
        $('<img>').appendTo(jingpin).attr('src', '../img/lym/yangrou.png')
    }

    for (i = 0; i < 4; i++) {
        var haixian = $('<div>').appendTo($('.box')).addClass('haixian');
        var biaoti = $("<div>").appendTo(haixian).addClass('haixian-biaoti');
        var neirong = $("<div>").appendTo(haixian).addClass('haixian-neirong');
        var left = $('<div>').appendTo(biaoti).addClass('left');
        var right = $('<div>').appendTo(biaoti).addClass('eight');
        $('<i>').appendTo(left).addClass('icon iconfont  icon-haixian');
        $('<strong>').appendTo(left).html('&nbsp;&nbsp;水产海鲜&nbsp;&nbsp;');
        $('<span>').appendTo(left).html('国内到国外的海鲜&nbsp;&nbsp;我们都有');
        $('<span>').appendTo(right).html('更多&nbsp;>');
        for (var a = 0; a < 4; a++) {
            var zhonglei = $('<div>').appendTo(neirong).addClass('zhonglei');
            $('<img>').appendTo(zhonglei).attr('src', '../img/lym/lizhi.png')
            $('<strong>').appendTo(zhonglei).html('新西兰佳沛黄金果');
            $('<br>').appendTo(zhonglei)
            $('<span>').appendTo(zhonglei).html('果肉绵密，花蜜般的甘甜百吃不厌');
            var jiage=$('<div>').appendTo(zhonglei).addClass('jiage');
            $('<strong>').appendTo(jiage).html('￥28.80 &nbsp;&nbsp;');
                    $('<span>').appendTo(jiage).html('￥40.00');
                            $('<i>').appendTo(jiage).addClass('icon iconfont  icon-gouwuche');
        }
    }
    for (var a = 0; a < 4; a++) {
        var zhonglei = $('<div>').appendTo($('.libaiwu .swiper-slide')).addClass('zhonglei');
        $('<img>').appendTo(zhonglei).attr('src', '../img/lym/rou.png');
    }
</script>

</html>